<template>
  <div id="goodslist">
    <page-title>
      <span slot="pageName">审核列表</span>
    </page-title>
    <div class="box">
      <el-button class="uploadGoods" type="primary" round @click="chose = 'all'">全部</el-button>
      <el-button class="uploadGoods" type="danger" round @click="chose = 1">审核中</el-button>
       <el-button class="uploadGoods" type="success" round @click="chose = 3">已通过</el-button>
        <el-button class="uploadGoods" type="info" round @click="chose = 2">已拒绝</el-button>
    </div>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      stripe
      align="center"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="id" align="center" label="用户ID"></el-table-column>
      <el-table-column prop="shopimage" align="center" label="身份证正面">
            <template slot-scope="scope">
                  <el-popover trigger="hover" placement="top">
                    <p><img :src="scope.row.front" alt="" class="popImg"></p>
                        <div slot="reference" class="name-wrapper">
                              <img :src="scope.row.front" alt="" class="goodsImg">
                        </div>
                  </el-popover>
            </template>
      </el-table-column>
      <el-table-column prop="shopimage" align="center" label="身份证返面">
            <template slot-scope="scope">
                  <el-popover trigger="hover" placement="top">
                    <p><img :src="scope.row.contrary" alt="" class="popImg"></p>
                        <div slot="reference" class="name-wrapper">
                              <img :src="scope.row.contrary" alt="" class="goodsImg">
                        </div>
                  </el-popover>
            </template>
      </el-table-column>
      <el-table-column prop="title" align="center" label="面部视频">
        <template slot-scope="scope">
                  <el-popover trigger="hover" placement="top">
                    <p><video :src="scope.row.video" alt="" class="popImg" controls /></p>
                        <div slot="reference" class="name-wrapper">
                           <el-button type="primary" size="mini" icon="el-icon-video-play">查看视频</el-button>
                        </div>
                  </el-popover>
            </template>
      </el-table-column>
      <el-table-column prop="identity" align="center" label="证件号码"></el-table-column>
      <el-table-column prop="name" align="center" label="真实姓名"></el-table-column>
      <el-table-column  align="center" label="服务类目">
        <template slot-scope="scope">
          <el-tag type="primary">
            {{ scope.row.items }}
          </el-tag>
        </template>
      </el-table-column>


      <el-table-column prop="status" align="center" label="状态">
            <template slot-scope="scope">
                  <el-button type="danger" v-if="scope.row.status == 1" size="mini" round @click="GoodsDisplay(scope.row.id)">
                        审核中
                  </el-button>
                  <el-button type="info" v-if="scope.row.status == 2" size="mini" round @click="GoodsDisplay(scope.row.id)">
                        未通过审核
                  </el-button>
                  <el-button type="success" v-if="scope.row.status == 3" size="mini" round @click="GoodsDisplay(scope.row.id)">
                      已通过审核
                  </el-button>
            </template>
      </el-table-column>
      <el-table-column prop="cardNum" align="center" label="操作">
        <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="reject(scope.row)">拒绝</el-button>
            <el-button type="success" size="mini" @click="resolve(scope.row)">同意</el-button>
          <!-- <el-button size="mini" type="primary" round @click="goodsEdit(scope.row)"><i class="el-icon-edit"></i>编辑商品</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    
    <div class="dialog">
      <goods-dialog :DialogData="DialogData" :FormData="FormData" @update="getGoodslist"></goods-dialog>
      <shen-he :tableData="rejectData" :shenhe="shenhe" @update="getGoodslist"></shen-he>
    </div>
  </div>
</template>

<script>
import PageTitle from "@/components/PageTitle";
import GoodsDialog from "@/components/Goods/AddGoods";
import ShenHe from "@/components/dialog/ShenHe";
export default {
  data() {
    return {
      tableData: [
       
      ],
      allData: [],
      DialogData: {
        title: "",
        show: false,
        add: false
      },
      FormData: {},
      isButton: true,
      roleStatus: "",
      chose: "1",
      shenhe: {
        show: false,
      },
      rejectData: {
        explain: "",
      },
    };
  },

  components: {
    PageTitle,
    GoodsDialog,
    ShenHe,
  },
  computed: {
    token() {
      return localStorage.miniToken;
    }
  },
  watch: {
    chose() {
      if (this.chose == 'all') {
        this.getGoodslist()
      } else {
        this.getMasterData(this.chose)
      }
    }
  },
  mounted () {
    this.getGoodslist();
  },
  methods: {
    // 筛选列表
    getMasterData(stats) {
      this.tableData = []
      this.allData.forEach( el => {
        if (el.status == stats) {
          this.tableData.push(el)
        }
      })
    },
    // 编辑商品
    goodsEdit(row) {
      this.DialogData = {
        title: "编辑商品",
        show: true,
        add: false
      };
      this.FormData = {
            id: row.id,
            title: row.title,
            shopimage: row.shopimage,
            score: row.score,
            money: row.money,
            explain: row.explain
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    // 添加商品
    AddGoods() {
      this.DialogData = {
        title: "添加商品",
        show: true,
        add: true
      };
      this.FormData = {
            title: "",
            shopimage: "",
            score: "",
            money: "",
            explain: ""
      }
    },

    // 获取商品数据
    async getGoodslist() {
      let token = localStorage.miniToken
      let res = await this.$axios.post("/admin/user/mastercheck", { token: this.token })
      let data = res.data.data
      // console.log(data);
      this.allData = data
      this.tableData = data 
    },

    // 商品是否显示
    async GoodsDisplay( id ) {
      
      let res = await this.$axios.post("/admin/shop/shopdisplay", {
        token: this.token,
        id
      })
      let code = res.data.code
      if (code == 200 || code || 202) {
        this.$message.success("更新成功")
        this.getGoodslist()
      }
    },

    // 拒绝审核
    async reject( role ) {
      // let res = await this.$axios.post("/admin/user/ismaster", {
      //   id: role.id,
      //   status: "2",
      //   token: this.token,
      // })
      this.shenhe = {
        show: true,
        
      }
      this.rejectData = {
        status: "2",
        id: role.id,
        explain: "",
      }
      
    },
    // 同意入住
    async resolve( role ) {
      let res = await this.$axios.post("/admin/user/ismaster", {
        id: role.id,
        token: this.token,
        status: "3"
      })
      let code = res.data.code
      if (code == 204 ) {
        this.$message.success("更新成功!")
        this.getGoodslist()
      }
      
    },

  },
};
</script>

<style lang="scss" scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.box {
  width: 100%;
  text-align: left;
  padding-bottom: 30px;
}
.goodsImg {
  width: 100px;
  height: 30px;
}
.popImg {
  max-width: 400px;
  height: auto;
}
.goodsdesc {
  width: 100px;
  height: 25px;
}
// .uploadGoods {
//   float: right;
//   margin: 10px 20px;
// }
</style>